<template>
  <div id="no-network">
    <div>
      <img src="../assets/nonetwork.jpg">
    </div>
    <div>网络走丢啦</div>
    <div>
      <button @click="refresh">刷新一下</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NoNetwork',
    inject:['reload'],
    methods: {
      refresh: function () {
        // console.log(this.$router.history.current.path)
        // this.$router.go(0)
        this.reload()
      }
    }
  }
</script>

<style>
  #no-network {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 30%;
  }

  #no-network div img {
    width: 150px;
    height: 150px;
    opacity: 0.6;
  }

  #no-network div {
    font-size: 12px;
    margin-top: 10px;
  }

  #no-network div button {
    height: 36px;
    width: 220px;
    background-color: lightgreen;
    color: white;
    outline: none;
    border: none;
    border-radius: 18px;
    margin-top: 10px;
  }
</style>
